<template>
  <!-- 注册账号 -->
  <div>
    <!-- 动态粒子效果 -->

    <div class="register" style="height: 500px">
      <h1 style="margin-top: 10px">注册账号</h1>
      <div style="height: 20px"></div>
      <div>
        <el-input
          placeholder="请输入手机号"
          v-model="user.phone"
          clearable
          class="in"
          suffix-icon="el-icon-warning"
          onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
          maxlength="11"
        >
        </el-input>
        <br /><br />
        <el-input
          placeholder="请输入姓名"
          v-model="user.name"
          clearable
          class="in"
        >
        </el-input>
        <br /><br /><span style="margin-left: -100px">性别</span
        ><el-switch
          v-model="value1"
          active-text="女"
          inactive-text="男"
          active-color="#13ce66"
          inactive-color="#13ce66"
          style="margin-left: 100px"
        >
        </el-switch>

        <br /><br />
        <el-input
          placeholder="请输入用户名"
          v-model="user.userName"
          clearable
          class="in"
          suffix-icon="el-icon-warning"
        >
        </el-input>
        <br /><br />
        <el-input
          placeholder="请输入密码"
          v-model="user.password"
          show-password
          class="in"
        ></el-input>
        <br /><br />
        <el-input
          placeholder="请确认密码"
          v-model="confirmpassword"
          show-password
          class="in"
        ></el-input>
      </div>
      <div style="height: 30px"></div>
      <el-button type="primary" @click="register">注册</el-button>
      <el-button type="primary" @click="login">返回</el-button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    // 注册
    register() {
      this.$message({
        duration: 600,
        dangerouslyUseHTMLString: true,
        message: '<i class="el-icon-loading"></i>注册中',
      });
      if (this.user.password == this.confirmpassword) {
        if (this.value1) {
          this.user.sex = this.sex[0];
        } else {
          this.user.sex = this.sex[1];
        }
        this.$axios
          .post("/safesys/api/user/register", this.user)
          .then((res) => {
            this.$message({
              duration: 1500,
              message: res.data.msg,
            });
            if (res.data.code == 1) {
              this.$router.push({
                name: "Login",
                params: {
                  userName: this.user.userName,
                  password: this.user.password,
                },
              });
            }
          });
      } else {
        this.$message({
          duration: 600,
          dangerouslyUseHTMLString: true,
          message: '<i class="el-icon-warning"></i>两次密码输入不一致',
        });
      }
    },
    login() {
      this.$message({
        duration: 600,
        dangerouslyUseHTMLString: true,
        message: '<i class="el-icon-loading"></i>转跳中',
      });
      setTimeout(() => {
        this.$router.push("/");
      }, 500);
    },
  },
  data() {
    return {
      // 注册账号
      user: {
        phone: "",
        name: "",
        userName: "",
        password: "",
        sex: "",
      },
      // 确认密码
      confirmpassword: "",
      sex: ["女", "男"],
      value1: false,
    };
  },
  created() {
    if (
      navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      )
    ) {
      this.$router.push("/carry");
    }
  },
};
</script>
